<template>
	<view class="register">
		<view class="logo"><image src="/static/images/logo.png" mode=""></image></view>

		<!-- 注册页面 -->
		<view class="information">
			<view class="public">
				<image src="/static/images/mobile.png"></image>
				<input type="text" placeholder="输入手机号码" v-model="account" />
			</view>

			<!-- 验证码登录 -->
			<view class="public">
				<image src="/static/images/public.png"></image>
				<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
				<view class="getAuthCode" @click="code" v-if="verification">发送验证码</view>
				<view class="getAuthCode" v-if="!verification">{{ timer }}秒</view>
			</view>

			<view class="public">
				<image src="/static/images/password.png"></image>
				<input type="password" placeholder="请输入密码  (密码必须为数字加字母)" class="codeIput" v-model="password" style="flex: 1;" />
			</view>

			<view class="public">
				<image src="/static/images/password.png"></image>
				<input type="password" placeholder="再次确认密码" class="codeIput" v-model="againPassword" />
			</view>

			<view v-if="showSuperiorCode" class="public">
				<image src="/static/images/public.png"></image>
				<input type="text" placeholder="请填写邀请人手机号" class="codeIput" v-model="superiorCode" />
			</view>
		</view>

		<view class="logoButton"><button @click="register" class="loginTo">注册</button></view>

		<view class="operate">
			<!-- 注册页面 -->
			<view class="referrer">
				<text>已有账号?</text>
				<navigator url="/pages/login/login" open-type="redirect" hover-class="other-navigator-hover">
					<text class="promptly">立即登录</text>
				</navigator>
			</view>
		</view>

		<!-- <view class="official">
			<view class="officialCode">
				<text>官方邀请号:</text>
				<text>18096686035</text>
			</view>
		</view> -->
	</view>
</template>

<script>
const BACK_URL = 'login_back_url';
export default {
	data() {
		return {
			logoColorIndex: 0,
			current: 1,
			account: '',
			password: '',
			againPassword: '',
			captcha: '',
			type: 'register',
			logoUrl: '',
			keyCode: '',
			codeUrl: '',
			codeVal: '',
			isShowCode: false,
			verification: true,
			timer: 60, // 定义初始时间为60s
			superiorCode: '', // 上级邀请码
			showSuperiorCode: true // 控制上级邀请码显示
		};
	},
	onLoad() {
		let that = this;
		let codeNum = that.$db.get('spread');

		if (codeNum == undefined || !codeNum || codeNum == '') {
			that.showSuperiorCode = true;
		} else {
			that.showSuperiorCode = false;
		}
	},
	methods: {
		// 获取验证码
		code() {
			let that = this;
			if (!that.account.trim()) return that.$common.errorToShow('请填写手机号码');
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account.trim())) return that.$common.errorToShow('请输入正确的手机号码');
			that.$api.registerVerify(
				{
					phone: that.account,
					type: that.type,
					key: that.keyCode,
					code: that.codeVal
				},
				res => {
					that.$common.errorToShow(res.message);
					that.verification = false;
					that.countDown(); // 执行验证码计时
				}
			);
		},
		// 验证码倒计时
		countDown() {
			let auth_timer = setInterval(() => {
				// 定时器设置每秒递减
				this.timer--; // 递减时间
				if (this.timer <= 0) {
					this.timer = 60
					this.verification = true; // 60s时间结束还原v-show状态并清除定时器
					clearInterval(auth_timer);
				}
			}, 1000);
		},
		// 注册
		register() {
			let that = this;
			if (!that.account.trim()) return that.$common.errorToShow('请填写手机号码');
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account.trim())) return that.$common.errorToShow('请输入正确的手机号码');
			if (!that.captcha.trim()) return that.$common.errorToShow('请填写验证码');
			if (!/^[\w\d]+$/i.test(that.captcha.trim())) return that.$common.errorToShow('请输入正确的验证码');
			if (!that.password.trim()) return that.$common.errorToShow('请填写密码');
			if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password.trim())) return that.$common.errorToShow('您输入的密码过于简单');
			if (that.password !== that.againPassword) return that.$common.errorToShow('两次密码不一致');
			if (!that.superiorCode.trim()) return that.$common.errorToShow('请填写上级邀请人手机号码');
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.superiorCode.trim())) return that.$common.errorToShow('请输入正确的上级邀请人手机号码');
			that.$api.register(
				{
					phone: that.account,
					sms_code: that.captcha,
					password: that.password,
					spread: that.$db.get('spread') ? that.$db.get('spread') : that.superiorCode
				},
				res => {
					// 这里要加入注册成功后跳转到首页   旧代码在下面
					if (res.status == 200) {
						let data = res.data;

						that.$db.del('spread');
						that.$common.successToShow('注册成功');
						that.$db.set('LOGIN', {
							token: data.token,
							time: data.exp
						});
						that.$db.set('SETUID', data.user.uid);
						that.$db.set('UPDATE_USERINFO', data.user);
						this.$db.set('userToken', data);

						let login_goods_id = that.$db.get('login_goods_id');
						if (login_goods_id) {
							that.$db.del('login_goods_id');
							uni.reLaunch({
								url: '/pages/goods/details/details?id=' + login_goods_id
							});
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					} else {
						that.$common.errorToShow(res.message);
					}
				}
			);
			// register({

			// 	})
			// 	.then(({
			// 			data
			// 		}) => {
			// 		that.$Cache.clear('timer');
			// 		that.$util.Tips({
			// 			title:"注册成功"
			// 		});

			// 		const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
			// 		that.$Cache.clear(BACK_URL);
			// 		that.$store.commit("LOGIN", {
			// 			'token': data.token,
			// 			'time': data.exp
			// 		});
			// 		that.$store.commit("SETUID", data.user.uid);
			// 		that.$store.commit('UPDATE_USERINFO', data.user);
			// 		if (backUrl === '/pages/index/index' || backUrl === '/pages/course/course' || backUrl ==='/pages/user/index') {
			// 			uni.switchTab({
			// 				url: backUrl
			// 			});
			// 		} else {
			// 			uni.switchTab({
			// 				url: '/pages/index/index'
			// 			});
			// 		}
			// 	})
			// 	.catch(err => {
			// 		that.$util.Tips({
			// 			title: err
			// 		});
			// 	});
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #ffffff;
}
.register {
	width: 100%;
	height: 100%;
	.logo {
		background-color: #ffffff;
		text-align: center;
		padding-top: 100rpx;
		image {
			width: 230rpx;
			height: 266rpx;
		}
	}

	.information {
		background-color: #ffffff;
		padding: 0 100rpx;
		.public {
			width: 550rpx;
			height: 132rpx;
			line-height: 132rpx;
			border-bottom: 2rpx solid #dcdcdc;
			padding-top: 15rpx;
			position: relative;
			display: flex;
			align-items: center;
			.getAuthCode {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				display: inline-block;
				font-size: 24rpx;
				color: #e25b29;
				background-color: #ffd7c7;
				width: 150rpx;
				height: 60rpx;
				border-radius: 30px;
				line-height: 60rpx;
				overflow: hidden;
				text-align: center;
			}
		}
		image {
			width: 24rpx;
			height: 34rpx;
			margin-right: 20rpx;
			margin-bottom: 5rpx;
		}
		input {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			line-height: 42rpx;
		}
	}
	.logoButton {
		background-color: #ffffff;
		padding: 35rpx 100rpx;
		.loginTo {
			width: 549rpx;
			height: 76rpx;
			text-align: center;
			line-height: 76rpx;
			color: #ffffff;
			border-radius: 38rpx;
			background: linear-gradient(to right, #f4a323, #e25a29);
		}
	}
	.operate {
		background-color: #ffffff;
		padding: 0 100rpx;
		overflow: hidden;
		navigator {
			display: inline-block;
		}
		.referrer {
			float: right;
			.promptly {
				color: #e25a29;
				font-weight: bold;
			}
		}
	}
	.official {
		background-color: #ffffff;
		text-align: center;
		padding-top: 10rpx;
		.officialCode {
			text:nth-child(1) {
				margin-right: 20rpx;
			}
			text:nth-child(2) {
				color: #e25a29;
				font-weight: bold;
			}
		}
	}
}
</style>
